<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <child :level="level">Hello world!</child>
    </div>
</body>
<script src="./vue.js"></script>
<script> 
    const child = Vue.extend({
    props: {
        level: {  type: Number,  required: true  } 
    },
    render(h) {
        const tag = [ 'div' ,  'p' ,  'strong' ,  'h1' ,  'h2' ,  'textarea' ][this.level-1];
        console.log(this);//注意render函数里的this指向Proxy代理对象
        return h(
            tag,//第一个参数是整个render函数的头标签名
            {class:{foo: true,},style:{background: 'orange',color: 'skyblue'},attrs:{title: 'nbanbanba'},domProps:{innerHTML: '我是父标签<p>我是子标签</p>'}},//第二个参数是一个对象，可以设置一些标签的属性
            [h('p', '我是子标签')]//第三个参数是数组或者字符串，是设置子节点的
            );
    }
    })
    let vm = new Vue({
        el:'#app',
        data() {
            return {
                level: 4
            }
        },
        created() {
        },
        components:{child}
    })
</script>
</html>